<template>
	<!-- 租房详细情况 -->
	<view>
		<!-- 轮播图 -->
		<u-swiper height="200" width="100%" keyName="image" radius="0" :list="banner" circular></u-swiper>
		<view class="c-m-tard">
			<!-- 押2付1 -->
			<view class="m-card u-m-30 ">
				<view class="u-flex u-flex-y-center">
					<text class="u-m-l-10 u-font-32 m-font-b">{{ detail.properties_name }}</text>
				</view>
				<view class="u-flex u-flex-wrap">
					<view class="u-m-t-40 u-m-l-10" v-if="detail.paytype"><u-tag :text="detail.paytype" plain size="mini"></u-tag></view>
				</view>
				<view class="u-p-t-60">
					<u-grid :col="4">
						<u-grid-item v-for="(item, index) in picture" :key="index" @click="nextNav(item.url)">
							<view class="u-font-28 m-zise">
								{{ item.icon }}{{ index === 0 ? '元/月' : index === 1 ? '㎡' : index === 2 ? '房' : '' }}{{ item.ting }}
								<text v-if="index === 2">厅</text>
							</view>
							<view class="u-m-t-20">{{ item.name }}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<!-- 租期 : -->
			<view class="m-card u-m-30">
				<view class="u-flex u-flex-between u-flex-wrap">
					<view class="Reset" v-for="(it, id) in leaseTerm" :key="id">
						<view class="u-p-20 u-font-30 m-c-h">
							{{ it.lease }}
							<text class="m-c-h1 u-m-l-10">{{ it.term }}</text>
						</view>
					</view>
				</view>
				<!-- 配套信息 : -->
				<view class="m-mg-lr">
					<u-scroll-list indicatorActiveColor="#daaf7f">
						<view class="scroll-list__goods-item m-bg-w u-flex u-flex-around m-text-align">
							<view class="kuang" v-for="(item, index) in machine" :key="index" v-if="item.bool">
								<u--image :src="item.icon" width="40" height="40" mode="widthFix"></u--image>
								<view style="width: 140rpx;" class="u-m-t-20">{{ item.name }}</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<!-- 配套信息 : -->
				<!-- <view class="Reset u-p-l-20 u-p-t-30 u-font-30 m-c-h">配套信息 :</view> -->
				<u-grid :col="3">
					<u-grid-item v-for="(item, index) in leaseAerm" :key="index">
						<view class="u-p-20 u-font-24 m-c-o">
							{{ item.text }}
							<text class="u-m-l-10 m-c-h1">{{ item.ke }}</text>
						</view>
					</u-grid-item>
				</u-grid>
				<!-- 周边配套 : -->
				<view class="Reset u-p-20 u-font-30 m-c-h">周边配套 :</view>
				<!-- 地图 -->
				<view class="top-2 u-p-b-20">
					<!-- <map id="map" style="width: 100%; height:215px;" :latitude="detail.lat" :longitude="detail.lon"
						@tap="toMap(detail.lat, detail.lon)" :enable-scroll="true" :enable-zoom="true">
						<cover-view slot="callout">
							<cover-view :marker-id="detail.id" class="m-flex-y u-flex-items-center">
								<cover-view class="u-flex m-marker-box u-flex-1">
									<cover-view class="u-p-r-20 borright">
										<cover-view>{{ detail.name }}</cover-view>
										<cover-view class="u-font-20 m-c-h u-m-t-10 m-line-1">{{ detail.address }}
										</cover-view>
									</cover-view>
									<cover-view class="m-flex-y u-flex-items-center u-m-l-20 m-flex-no">
										<cover-image src="/static/map/1.png" class="widhei"></cover-image>
										<cover-view class="m-c-g u-font-20">路线导航</cover-view>
									</cover-view>
								</cover-view>
								<cover-view class="daosanjiao"></cover-view>
							</cover-view>
						</cover-view>
					</map> -->

					<map
						id="map"
						style="width: 100%; height:215px;position: relative;"
						:latitude="detail.lat"
						:longitude="detail.lon"
						@tap="toMap(detail.lat, detail.lon)"
						:enable-scroll="true"
						:enable-zoom="true"
						:show-location="true"
					>
						<cover-view slot="callout">
							<cover-view :marker-id="detail.id" class="m-flex-y u-flex-items-center">
								<cover-view class="u-flex m-marker-box u-flex-1">
									<cover-view class="u-p-r-20 borright">
										<cover-view>{{ detail.name }}</cover-view>
										<cover-view class="u-font-20 m-c-h u-m-t-10 m-line-1">{{ detail.address }}</cover-view>
									</cover-view>
									<cover-view class="m-flex-y u-flex-items-center u-m-l-20 m-flex-no">
										<cover-image src="/static/map/1.png" class="widhei"></cover-image>
										<cover-view class="m-c-g u-font-20">路线导航</cover-view>
									</cover-view>
								</cover-view>
								<cover-view class="daosanjiao"></cover-view>
							</cover-view>
						</cover-view>
						<cover-image class="map-dingwei" src="http://neidangjia.oss-cn-beijing.aliyuncs.com/df/dingwei.png" @click="moveToLocation"></cover-image>
					</map>

					<view class="u-p-t-10 u-p-l-40 u-p-r-20 u-p-b-10" v-for="(item, index) in listData" :key="item.name" v-if="item.nickname != '无'">
						<view class="u-flex">
							<u--image :showLoading="false" :src="item.src" width="32rpx" height="32rpx"></u--image>
							<view class="u-m-l-15 m-font-b u-font-26">
								<text>{{ item.name }}</text>
							</view>
						</view>
						<view class="pt-info">{{ item.nickname }}</view>
					</view>
				</view>

				<view class="u-flex u-flex-between u-flex-wrap">
					<view class="Reset m-text-align" v-for="(its, ids) in commercial" :key="ids">
						<view class="u-p-10 u-font-30 m-c-h">{{ its.title }}</view>
					</view>
				</view>

				<!-- 流程图 -->
				<view class="u-flex u-flex-y-center u-m-t-20 u-m-b-20"><u--image mode="widthFix" src="https://neidangjia.oss-cn-beijing.aliyuncs.com/jiaju/zufang.png"></u--image></view>
			</view>
			<!-- 相似户型推荐 -->
			<view class="m-card u-m-30">
				<view class="u-flex u-flex-y-center u-m-t-20 u-m-b-20">
					<text class="m-xian"></text>
					<text class="u-m-l-10 u-font-32 m-font-b">相似户型推荐</text>
				</view>
				<view class="m-mg-lr">
					<!-- @right="right" @left="left" -->
					<u-scroll-list indicatorActiveColor="#dbb70b" indicatorColor="#d2d2d2">
						<view class="scroll-list" style="flex-direction: row;">
							<view
								class="scroll-list__goods-item m-bg-w"
								v-for="(item, index) in dataList"
								:key="index"
								:class="[index === 9 && 'scroll-list__goods-item--no-margin-right']"
								@click="nextNav('/pages/zufang/xiangqing?id=' + item.id)"
							>
								<view v-for="(items, indexs) in item.images.split(',')" :key="indexs" v-if="indexs < 1"><image class="scroll-list__goods-item__image" :src="items"></image></view>
								<view class="m-mg-lr-20">
									<text class="u-font-30 m-font-b">{{ item.properties_name }}</text>
									<view class="iconfont m-c-h u-font-28 u-m-t-10">{{ item.bedroom }}室{{ item.room }}厅{{ item.area }}㎡</view>
									<u-rate :count="count" v-model="value" class="scroll-list__goods-item__text" active-color="#dbb07b" inactive-color="#b2b2b2"></u-rate>
									<view class="u-p-b-15 u-p-t-15">
										<text class="m-c-o u-font-28">租金：{{ item.price / 1 }}元/月</text>
									</view>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>

			<view class="height-120"></view>
			<view class="nav-b">
				<view class="u-m-l-30 u-flex u-flex-around u-flex-items-center" style="width: 40%;">
					<view class="u-flex u-column u-flex-items-center u-flex-around" @click="requestStatus ? getshou() : ''">
						<view><u-icon name="star" size="27" :color="detail.isGuanzhu == 1 ? '#dbb07b' : '#979797'"></u-icon></view>
						<view>
							<text class="dui" :class="detail.isGuanzhu == 1 ? 'c9' : 'm-c-97'">{{ detail.isGuanzhu == 1 ? '已收藏' : '收藏' }}</text>
						</view>
					</view>
					<view class="u-m-l-30 u-flex u-column u-flex-items-center u-flex-around" @click="requestStatus ? getad() : ''">
						<view><u-icon name="fuzhi" customPrefix="master" size="27" :color="detail.isDuibi === 0 ? ' #979797' : 'm-c-g'"></u-icon></view>
						<view class="">
							<!-- <text :class="detail.isDuibi === 0 ? 'dui' : ' m-c-g'"> -->
							<text class="dui">
								<!-- {{detail.isDuibi === 0 ? '对比' : '已对比'}} -->
								对比
							</text>
						</view>
					</view>
				</view>

				<view class="u-m-r-30 u-flex u-flex-items-center">
					<view class="box1" @click="requestStatus ? getlian() : ''"><text>联系业主</text></view>
					<view class="box2 u-m-l-20" @click="detail.yuyuekanfang === 1 ? (requestStatus ? queren() : '') : requestStatus ? getyu() : ''">
						<text>{{ detail.yuyuekanfang === 0 ? '预约看房' : '确认租房' }}</text>
					</view>
				</view>
			</view>
			<u-popup :show="shows" @close="closes" zIndex="99999" mode="bottom" round="10" :closeOnClickOverlay="true" :overlayStyle="{ zIndex: '99998' }">
				<view class="m-mg-lr u-m-t-30">
					<view><text>预约到访时间</text></view>
					<view class="u-m-t-30 u-flex u-flex-between u-flex-wrap">
						<view class="u-m-b-20" :class="datalist_index === index ? 'boxb' : 'boxa'" v-for="(item, index) in datalist" :key="index" @click="datalist_index = index">
							<text>{{ item.name }}</text>
						</view>
					</view>
					<view class="m-mg-lr u-border-top u-m-b-30 u-p-t-20"><view class="boxhuzi" @click="requestStatus ? open() : ''">确定</view></view>
				</view>
			</u-popup>
			<u-calendar :show="show" :mode="mode" @confirm="confirm" color="#DAAF7F" @close="close" :closeOnClickOverlay="true"></u-calendar>
			<obtain :show="obtain" @showchange="obtain = false"></obtain>
			<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
		</view>
	</view>
</template>

<script>
import QQMapWX from '@/common/qqmap-wx-jssdk.js';
let qqmapsdk = new QQMapWX({
	key: 'VDPBZ-Z7A3K-7Z7JG-A6KLA-WIZJH-7QBTD'
});
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
var H = d.getHours(),
	i = d.getMinutes();
const date = d.getDate();
export default {
	data() {
		return {
			show: false,
			shows: false,
			banner: [],
			datalist: [
				{
					name: '9:00-10:00'
				},
				{
					name: '10:00-11:00'
				},
				{
					name: '11:00-12:00'
				},
				{
					name: '12:00-13:00'
				},
				{
					name: '13:00-14:00'
				},
				{
					name: '14:00-15:00'
				},
				{
					name: '15:00-16:00'
				},
				{
					name: '16:00-17:00'
				},
				{
					name: '17:00-18:00'
				}
			],
			picture: [
				{
					icon: '0',
					name: '租金',
					ting: ''
				},
				{
					icon: '0',
					name: '面积',
					ting: ''
				},
				{
					icon: '0',
					ting: '0',
					name: '房型'
				},
				{
					icon: '随时入住',
					name: '入住情况',
					ting: ''
				}
			],
			leaseTerm: [
				{
					lease: '租期 :',
					term: 'XXXX'
				},
				{
					lease: '楼层 :',
					term: 'XXXX'
				},
				{
					lease: '朝向 :',
					term: 'XXXX'
				},
				{
					lease: '电梯 :',
					term: 'XXXX'
				},
				{
					lease: '性质 :',
					term: 'XXXX'
				},
				{
					lease: '装修 :',
					term: 'XXXX'
				},
				{
					lease: '配套信息 :',
					term: ''
				}
			],
			machine: [
				{
					name: '床',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/zufang/b-iocn.png',
					bool: false
				},
				{
					name: '空调',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/zufang/c-iocn.png',
					bool: false
				},
				{
					name: '衣柜',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/jiaju/shiba.png',
					bool: false
				},
				{
					name: '热水器',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/jiaju/si.png',
					bool: false
				},
				{
					name: '天然气',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/zufang/k-iocn.png',
					bool: false
				},
				{
					name: '电视',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/jiaju/jiu.png',
					bool: false
				},
				{
					name: '冰箱',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/jiaju/shi.png',
					bool: false
				},
				{
					name: '暖气',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/jiaju/shisan.png',
					bool: false
				},
				{
					name: '洗衣机',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/zufang/a-iocn.png',
					bool: false
				},
				{
					name: '宽带',
					icon: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/jiaju/ershi.png',
					bool: false
				}
			],
			leaseAerm: [
				{
					text: '可否煮饭 :',
					ke: '可'
				},
				{
					text: '可否带小孩 :',
					ke: '可'
				},
				{
					text: '可否带宠物 :',
					ke: '可'
				}
			],
			latitude: null,
			longitude: null,
			scale: 16,
			covers: [],
			time: '',
			defaultDateMultiple: [`${year}-${month}-${date}`],
			detail: {},
			getcity: [],
			map: null,
			listData: [],
			datalist_index: null,
			ids: null
		};
	},
	onReady() {
		this.map = uni.createMapContext('map', this);
	},
	async onLoad(e) {
		if (e && e.id) {
			this.ids = +e.id;
			await this.getde(this.ids);
			await this.details(this.ids);
			let list = await this.require('getHouselist', {
				city: this.city,
				room: this.detail.room, //厅数
				bedroom: this.detail.bedroom, //室数
				balcony: this.detail.balcony, //阳台
				toilet: this.detail.toilet //卫数
			});
			if (list) {
				this.datalist = list;
			}
		}

		this.getcity = await this.require('getcity');
		this.getcity.unshift({
			id: 0,
			name: '不限'
		});
		this.city = this.getcity[1] ? this.getcity[1].name : '东莞市';

		let that = this;

		let yang = +e.type === 12 ? 'getMaphouse' : 'mapRoom';
		let markers = await this.require(yang, {
			areaname: '',
			price: '',
			pricemax: '',
			rooms: '',
			roomsmax: ''
		});

		if (this.pageLoad) {
			setTimeout(() => {
				this.pageLoad = false;
			}, 1000);
		}
	},

	methods: {
		moveToLocation() {
			this.map.moveToLocation({
				latitude: this.detail.lat,
				longitude: this.detail.lon
			});
		},
		async getshou() {
			let res = await this.require('follohouse', {
				id: this.detail.id,
				type: this.detail.isGuanzhu == 0 ? 0 : 1
			});
			if (res) {
				await this.getde(this.ids);
			}
		},
		tap() {
			let that = this;
			if (this.fromData.lat && this.fromData.address) return;
			uni.chooseLocation({
				success: function(res) {
					that.fromData.lat = res.latitude;
					that.fromData.lon = res.longitude;
					that.fromData.address = res.address;
				}
			});
		},
		async getde(id) {
			let res = await this.require('getAouse', {
				id
			});
			if (res) {
				this.detail = res;
				for (var i = 0; i < this.machine.length; i++) {
					for (var i = 0; i < res.facilities.length; i++) {
						if (this.machine[i].name == res.facilities[i].name) {
							this.machine[i].bool = true;
						}
					}
				}
				this.leaseAerm[1].ke = this.detail.is_child === 1 ? '可' : '否';
				this.leaseAerm[0].ke = this.detail.is_cook === 1 ? '可' : '否';
				this.leaseAerm[2].ke = this.detail.is_pets === 1 ? '可' : '否';
				this.picture[0].icon = this.detail.price / 1 || 0;
				this.picture[1].icon = this.detail.area || 0;
				this.picture[2].icon = this.detail.bedroom || 0;
				this.picture[2].ting = this.detail.room || 0;
				this.picture[3].icon = this.detail.lookroom || '随时可看';

				this.leaseTerm[3].term = this.detail.elevator;
				this.leaseTerm[2].term = this.detail.orientation;
				this.leaseTerm[5].term = this.detail.style;
				this.leaseTerm[0].term = this.$u.timeFormat(this.detail.createtime);
				this.leaseTerm[1].term = this.detail.floor;
				this.leaseTerm[4].term = this.detail.roomnature;
				this.banner = this.detail.images.split(',');
				uni.setNavigationBarTitle({
					title: res.properties_name
				});
				this.detail.characteristic = this.detail.characteristic.split(',');
				let a = res.bedroom + '房' + res.room + '厅';
				let price = this.get_look_two(res.price);
			}
		},
		async getZhou(location) {
			this.listData = [
				{
					src: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%403x.png',
					name: '交通配套',
					nickname: await this.zhou('公交站', location)
				},
				{
					src: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%403x.png',
					name: '教育配套',
					nickname: await this.zhou('学校幼儿园小学初中高中', location)
				},
				{
					src: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%202%403x.png',
					name: '商业配套',
					nickname: await this.zhou('商圈步行街超市菜市场', location)
				},
				{
					src: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%203%403x.png',
					name: '医疗配套',
					nickname: await this.zhou('医院诊所门诊', location)
				},
				{
					src: 'https://neidangjia.oss-cn-beijing.aliyuncs.com/room/%E6%A4%AD%E5%9C%86%20602%20%E6%8B%B7%E8%B4%9D%204%403x.png',
					name: '银行配套',
					nickname: await this.zhou('银行', location)
				}
			];
		},
		async zhou(keyword, location) {
			return await new Promise((resolve, reject) => {
				qqmapsdk.search({
					keyword,
					location,
					success: res => {
						let nickname = '';
						let long = res.data.length > 4 ? 5 : res.data.length;
						for (var j = 0; j < long; j++) {
							nickname += (j > 0 ? '、' : '') + res.data[j].title.replace('[公交站]', '').replace(/[\(（][^\)）]+[\)）]/, '');
						}
						resolve(nickname);
					}
				});
			});
		},

		async details(id) {
			//楼盘详情
			let res = await this.require('getproperties', {
				id
			});
			if (res) {
				this.getZhou({
					latitude: +res.lat,
					longitude: +res.lon
				});
			}
		},
		async queren() {
			this.requestStatus = false;
			if (!(await this.getMobile())) {
				return;
			}
			// this.nextNav('/pages/zufang/hetong?id=' + this.ids);
			await this.acquisition();
			this.requestStatus = true;
		},
		async acquisition() {
			let _this = this;
			let res = await this.require('getContrac');
			if (res) {
				uni.downloadFile({
					url: res[3].value, //这里为图片路径
					success: res1L => {
						if (res1L.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res1L.tempFilePath,
								success: function(res2) {
									console.log(res2, '88888880');
									uni.showToast({
										title: '保存成功'
									});
									setTimeout(() => {
										_this.nextNav('/pages/zufang/qingdan?id=' + _this.ids);
									}, 1000);
								},
								fail: function() {
									uni.showToast({
										title: '保存失败，请稍后重试！',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			}
		},

		async getyu() {
			this.requestStatus = false;
			if (!(await this.getMobile())) {
				return;
			}
			this.show = true;
			this.requestStatus = true;
		},
		confirm(e) {
			if (e) {
				this.time = e[0] ? e[0] : this.defaultDateMultiple[0];
				this.shows = true;
			}
		},
		async open() {
			this.requestStatus = false;
			let kan = this.detail.yuyuekanfang;
			let ban = this.detail.isBanzheng;
			if (this.datalist_index === null) {
				uni.$u.toast(`请选择${kan === 0 ? '看房' : ''}`);
			} else {
				let time = this.time + '-' + this.datalist[this.datalist_index].name;
				// let ro = this.detail.yuyuekanfang === 0 ? 'yuyuekanfang' : 'yuyuebanzheng';
				let res = await this.require('yuyuekanfang', {
					id: this.detail.id,
					date: time
				});
				if (res) {
					this.show = false;
					this.shows = false;
					this.getde(this.ids);
					// this.nextNav('/pages/zufang/yanzheng?time=' + time + '&h=' + H + '&i=' + i + '&id=' +
					// 	this.detail.id + '&name=' + this.detail.properties_name + '&img=' + this.imgs[0]);
				}
			}
			this.requestStatus = true;
		},
		async getad() {
			this.requestStatus = false;
			let list = [];
			if (uni.getStorageSync('ershoufang')) {
				list = JSON.parse(uni.getStorageSync('ershoufang'));
			}
			let show = true;
			let that = this;
			if (list.length) {
				list.map((p, i) => {
					if (p.id == this.detail.id) {
						show = false;
						uni.showModal({
							content: '你已添加,是否前往对比列表',
							success(res) {
								if (res.confirm) {
									that.nextNav('/pages/room/comparison?type=1');
									that.requestStatus = true;
								}
								if (res.cancel) {
									uni.$u.toast('你取消了前往列表页面');
									that.requestStatus = true;
								}
							}
						});
					}
				});
			}
			if (!show) return;
			list.push(this.detail);
			uni.setStorageSync('ershoufang', JSON.stringify(list));
			this.nextNav('/pages/room/comparison?type=1');
			this.requestStatus = true;
		},
		closes() {
			this.shows = false;
		},
		close() {
			this.show = false;
		},
		async getlian() {
			this.requestStatus = false;
			if (!(await this.getMobile())) {
				return;
			}
			this.nextNav('/pages/news/xiaoxi?id=' + this.detail.user_id);
			this.requestStatus = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.map-dingwei {
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 5px;
	left: 5px;
}

.kuang {
	width: 150rpx;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.pt-info {
	color: #a0a0a0;
	padding-left: 30rpx;
	padding-top: 20rpx;
	border-left: 4rpx solid #eee;
	line-height: 44rpx;
}

.borright {
	border-right: 1rpx solid #f1f1f1;
}

.m-marker-box {
	background-color: #fff;
	padding: 14rpx 26rpx;
	border-radius: 6rpx;
}

.dui {
	font-size: 22rpx;
}

.widhei {
	width: 20px;
	height: 17px;
}

.daosanjiao {
	width: 0;
	height: 0;
	border-top: 12rpx solid #fff;
	border-left: 12rpx solid transparent;
	border-right: 12rpx solid transparent;
}

.box1,
.box2 {
	width: 164rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	font-size: 24rpx;
	border-radius: 10rpx;
}

.box1 {
	background-color: #0e5543;
	color: #fff;
}

.box2 {
	border: 1rpx solid #0e5543;
	color: #0e5543;
}

.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;

		&__image {
			width: 300rpx;
			height: 300rpx;
			border-radius: 15rpx;
		}

		&__text {
			color: #f56c6c;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #fff0f0;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;

		&__text {
			font-size: 12px;
			width: 12px;
			color: #f56c6c;
			line-height: 16px;
		}
	}
}

.c-m-tard {
	position: absolute;
	margin-top: -70rpx;
	width: 100%;
}

.m-zise {
	font-weight: bold;
	color: #5a5a5a;
}

.Reset {
	width: 305rpx;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.c9 {
	color: #dbb07b;
}

.m-xian {
	width: 6rpx;
	height: 43rpx;
	background-color: #0e5642;
	margin-left: 20rpx;
}

.boxhuzi {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	background-color: #daaf7f;
	border-radius: 10rpx;
}

.boxa,
.boxb {
	width: 216rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	border-radius: 5rpx;
	font-size: 26rpx;
}

.boxa {
	background-color: #eee;
	color: #211f20;
}

.boxri {
	text-align: left;
}

.boxb {
	background-color: #daaf7f;
	color: #fff;
}
</style>
